<template>
  <div class="content">
    <h2>视频上传</h2>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="视频上传" label-width="120px" prop="file">
        <el-upload
          class="upload"
          drag
          action="none"
          :auto-upload="false"
          :show-file-list="true"
          accept="video/*"
          :http-request="startUpload"
          :limit="1"
          ref="upload"
          :on-change="handleChange"
          :on-exceed="limit"
          :on-remove="remove"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传视频文件，且不超过1G
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="视频标题" label-width="120px" prop="name">
        <el-input
          placeholder="请输入视频标题"
          v-model="form.name"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="视频封面" label-width="120px">
        <p style="margin: 0; color: #aaa">视频封面在上传视频成功后选取！</p>
      </el-form-item>
      <el-form-item label="视频分类" label-width="120px" prop="category">
        <el-select v-model="form.category" placeholder="请选择视频分类">
          <el-option
            v-for="e in categories"
            :label="e?.name"
            :value="e?.name"
            :key="e?.id"
          ></el-option>
        </el-select> </el-form-item
      ><el-form-item
        label="视频标签(选择下方标签或新建标签)"
        label-width="260px"
        required
      >
        <el-tag
          :key="tag"
          v-for="tag in form.selectTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button
          v-else-if="form.selectTags.length < 3"
          class="button-new-tag"
          size="small"
          @click="showInput"
          >+ New Tag</el-button
        > </el-form-item
      ><el-form-item label="可添加标签" label-width="120px"
        ><el-tag
          v-for="tag in tags"
          :key="tag.id"
          :type="form.selectTags.includes(tag.name) ? 'info' : ''"
          @click="form.selectTags.includes(tag.name) ? '' : addtag(tag.name)"
          :ref="tag.name"
        >
          {{ tag.name }}
        </el-tag></el-form-item
      ><el-form-item label="视频简介" label-width="120px" prop="desc"
        ><el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入视频简介"
          v-model="form.desc"
        >
        </el-input
      ></el-form-item>
    </el-form>
    <el-progress
      v-if="!status"
      :text-inside="true"
      :stroke-width="20"
      :percentage="percentage"
      v-show="percentage"
    ></el-progress>
    <el-progress
      v-else
      :text-inside="true"
      :stroke-width="20"
      :percentage="percentage"
      :status="status"
    ></el-progress>
    <p
      v-show="status == 'success'"
      style="text-align: center; color: rgb(154, 224, 120)"
    >
      {{ innerText }}<i class="el-icon-loading"></i>
    </p>
    <p
      v-show="!innerText && status == '' && percentage"
      style="text-align: center"
    >
      正在上传<i class="el-icon-loading"></i>
    </p>
    <span slot="footer" class="dialog-footer"
      ><el-button type="primary" v-if="!disable" @click="validateForm"
        >确 定 上 传</el-button
      >
      <el-button type="primary" disabled v-else>正 在 上 传</el-button>
      <el-button @click="cancel()">取 消</el-button>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      duration: null,
      newTags: [],
      vcode: null,
      selected: 0,
      disable: false,
      imgs_src: [],
      form: { file: {}, name: "", category: "", selectTags: [], desc: "" },
      categories: [],
      coverDialog: false,
      dialogVisible: false,
      state: false,
      users: {},
      w: "65px",
      isCollapse: true,
      user: [],
      tags: [],
      inputVisible: false,
      inputValue: "",
      percentage: 0,
      innerText: "",
      status: "",
      rules: {
        file: [{ required: true, message: "请选择要上传的视频文件" }],
        name: [{ required: true, message: "请输入视频标题" }],
        category: [
          { required: true, message: "请选择视频分类", trigger: "change" },
        ],
        desc: [{ required: true, message: "请输入视频简介" }],
      },
    };
  },
};
</script>
<style lang="less" scoped>
h2 {
  padding-top: 20px;
}
</style>
